<template>
  <!-- 设置人员 -->
  <div class="set-person-wrap">
    <!-- 查询条件 -->
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="searchForm" class="setPerson-form-inline" @submit.native.prevent  style="width: 100%;">
        <el-form-item  style="width: 100%;">
          <el-input
            @change="peopleMange"
            placeholder="搜索"
            v-model="searchForm.videoName"
            @keyup.enter.native="peopleMange"
            clearable>
          </el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 数据列表 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%">
      <el-table-column label="账户" prop="username"></el-table-column>
      <el-table-column label="姓名" prop="realname"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="deleteUser(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="more-btns" id="addSetPersonbtn">
      <el-button type="primary" @click="setPerson">添加用户</el-button>
    </div>
    <!-- 添加人员 -->
    <el-dialog
      :close-on-click-modal="false"
	    :append-to-body="true"
      title="添加人员"
      width="750px"
      top='5vh'
      v-if="dialogPersonInfo"
      :visible.sync="dialogPersonInfo"
      @close="closeSetPerson"
      v-dialogDrag>
      <person-list :orgId="orgId" :oldUserList="userTableData" :updateSetPerson="updateSetPerson"></person-list>
    </el-dialog>
  </div>
</template>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 150px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
  .setPerson-form-inline .el-form-item__content {
    width: 100%;
  }
  #addSetPersonbtn .el-button{
     margin-top: 3px;
  }
</style>
<script>
  import { getPermissions, delPermissionsByVideoId, updatePermissions, delPermissions} from '@/api/sysConfig'
  import personList from './PersonList'
  export default {
    name: 'SetPerson',
    // 引入子组件
    components: {
      personList
    },
    props: {
      personInfo: {
        type: Object
      },
      closeFun: {
        type: Function,
        required: true
      },
      orgId:{
        type: Number
      }
    },
    data() {
      return {
        loading: false,
        dialogEditInfo: false,
        dialogPersonInfo: false,
        // 搜索条件
        searchForm: {
            videoName: ''
        },
        // 列表数据
        userTableData: [],
        tableData: []
      }
    },
    created() {//入口
      let that = this
        // 加载列表
        that.getTableData()
    },
    methods: {
      // 获取列表数据
      getTableData(pageIndex, pageSize) {
        let that = this
        that.loading = true
        let parames = {
          videoId: this.personInfo.id
        }
        // 获取列表信息
        getPermissions(parames).then(res => {
          that.userTableData = res.data
          that.tableData = res.data.concat()
          that.loading = false
        })
      },
      search() {
        this.getTableData(1)
      }, 
        // 人员搜索     
      peopleMange() {
        let search = this.searchForm.videoName.trim()
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          this.tableData  = this.userTableData.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }else{
          this.tableData  = this.userTableData
        }
      },

      // 设置人员
      setPerson(row) {
        if(row) {
          this.dialogPersonInfo = true
        }
      },
      // 关闭设置人员弹框
      closeSetPerson(list) {
        let that = this
        that.dialogPersonInfo = false
      },

      // 关闭设置人员弹框
      updateSetPerson(list) {
        let that = this
        that.dialogPersonInfo = false
        let parames = {
          videoId: this.personInfo.id
        }
        // 获取列表信息
        delPermissionsByVideoId({
          videoId: this.personInfo.id
        }).then(res => {
          var accountNames =""
          if(list!=null && list.length>0){
            for(var i=0;i<list.length;i++){
              accountNames = accountNames+list[i].accountName
              if(i<list.length-1){
                accountNames = accountNames+","
              }
            }
          }
          updatePermissions({
            userNames : accountNames,
            videoId: this.personInfo.id
          }).then(res => {
            that.$message({
              type: 'success',
              message: '更新控制视频信息成功!'
            })
            that.search()
          })
        })
      },
      // 删除
      deleteUser(row) {
        let that = this
        if (row) {
          that.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            roundButton: true
          }).then(() => {
            // 调用删除接口
            delPermissions({
              id: row.id
            }).then(res => {
              if( res.status === 200) {
                that.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                // 刷新列表
                that.search()
              }else{
                that.$message.error(res.info)
              }
            })
          }).catch(() => {
          })
        }
      },
    }
  }
</script>
